<template>
    <div>
      <h1>房号列表</h1>
      <table class="table table-bordered"> 
        <tbody>
            <tr class="bg-primary">
                <td>编号</td>
                <td>房号</td>
                <td>房型名称</td>
                <td>房型图片</td>
                <td>门店名称</td>
                <td>房号状态</td>
                <td>创建时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list":key="item.Id">
                <td>{{item.Id}}</td>
                <td>{{item.HousenumName}}</td>
                <td>{{item.HtName}}</td>
                <td><a :href="item.Photo">查看</a></td>
                <td>{{item.ShopName}}</td>
                <td>
                    <span v-if="item.HouseNumState==1">空闲</span>
                    <span v-if="item.HouseNumState==2">已预约</span>
                    <span v-if="item.HouseNumState==3">已入住</span>
                </td>
                <td>{{moment(item.CreateTime).format('YYYY-MM-DD')}}</td>
                <td>
                    <input type="button" value="编辑" class="btn btn-info">
                    <input type="button" value="删除" class="btn btn-danger" @click="">
                </td>
            </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();

let list:any=ref({
    HousenumName :'',
    HtName :'',
    Photo :'',
    ShopName :'',
    HouseNumState : '',
    CreateTime : '',
})

onMounted(()=>{
    getFhao();
})
const getFhao=()=>{
    axios({
        url:'https://localhost:7193/api/House/GetHouseNum',
        method:'get',
        params:list,
    })
    .then(res=>{
        console.log(res);
        list.value=res.data;
    })
}

</script>

<style scoped>

</style>